<template>
  <div>
    <div class="i_t mar_10">
      <span class="fl">限时特卖</span>
      <span class="i_mores fr"><a href="#" @click.prevent="viewMore">更多</a></span>
    </div>
    <div class="content">
      <div class="i_sell">
        <!-- 使用Element Plus Carousel组件处理横幅轮播 -->
        <el-carousel 
          :interval="5000" 
          arrow="always"
          indicator-position="none"
          height="357px"
          ref="carouselRef"
        >
          <!-- 每页显示1个横幅 -->
          <el-carousel-item v-for="(banner, index) in banners" :key="index">
            <div id="imgPlay">
              <ul class="imgs" id="actor">
                <li>
                  <a href="#" @click.prevent="viewBanner(banner.id)">
                    <img :src="banner.image" width="211" height="357" :alt="banner.title" />
                  </a>
                </li>
              </ul>
            </div>
          </el-carousel-item>
        </el-carousel>
        <div class="previ" @click="scrollBanners('prev')">上一张</div>
        <div class="nexti" @click="scrollBanners('next')">下一张</div>
      </div>
      <div class="sell_right">
        <!-- 商品展示区域保持原有的HTML结构 -->
        <div class="sell_1" v-if="displayProducts.length > 0">
          <div class="s_img">
            <a href="#" @click.prevent="viewProduct(displayProducts[0].id)">
              <img :src="getProductImage(displayProducts[0])" width="185" height="155" :alt="displayProducts[0].name" @error="handleImageError" />
            </a>
          </div>
          <div class="s_price">￥<span>{{ displayProducts[0].price }}</span></div>
          <div class="s_name">
            <h2><a href="#" @click.prevent="viewProduct(displayProducts[0].id)">{{ displayProducts[0].name }}</a></h2>
            <span>限时特卖</span>
          </div>
        </div>
        <div class="sell_2" v-if="displayProducts.length > 1">
          <div class="s_img">
            <a href="#" @click.prevent="viewProduct(displayProducts[1].id)">
              <img :src="getProductImage(displayProducts[1])" width="185" height="155" :alt="displayProducts[1].name" @error="handleImageError" />
            </a>
          </div>
          <div class="s_price">￥<span>{{ displayProducts[1].price }}</span></div>
          <div class="s_name">
            <h2><a href="#" @click.prevent="viewProduct(displayProducts[1].id)">{{ displayProducts[1].name }}</a></h2>
            <span>限时特卖</span>
          </div>
        </div>
        <div class="sell_b1" v-if="displayProducts.length > 2">
          <div class="sb_img">
            <a href="#" @click.prevent="viewProduct(displayProducts[2].id)">
              <img :src="getProductImage(displayProducts[2])" width="242" height="356" :alt="displayProducts[2].name" @error="handleImageError" />
            </a>
          </div>
          <div class="s_price">￥<span>{{ displayProducts[2].price }}</span></div>
          <div class="s_name">
            <h2><a href="#" @click.prevent="viewProduct(displayProducts[2].id)">{{ displayProducts[2].name }}</a></h2>
            <span>限时特卖</span>
          </div>
        </div>
        <div class="sell_3" v-if="displayProducts.length > 3">
          <div class="s_img">
            <a href="#" @click.prevent="viewProduct(displayProducts[3].id)">
              <img :src="getProductImage(displayProducts[3])" width="185" height="155" :alt="displayProducts[3].name" @error="handleImageError" />
            </a>
          </div>
          <div class="s_price">￥<span>{{ displayProducts[3].price }}</span></div>
          <div class="s_name">
            <h2><a href="#" @click.prevent="viewProduct(displayProducts[3].id)">{{ displayProducts[3].name }}</a></h2>
            <span>限时特卖</span>
          </div>
        </div>
        <div class="sell_4" v-if="displayProducts.length > 4">
          <div class="s_img">
            <a href="#" @click.prevent="viewProduct(displayProducts[4].id)">
              <img :src="getProductImage(displayProducts[4])" width="185" height="155" :alt="displayProducts[4].name" @error="handleImageError" />
            </a>
          </div>
          <div class="s_price">￥<span>{{ displayProducts[4].price }}</span></div>
          <div class="s_name">
            <h2><a href="#" @click.prevent="viewProduct(displayProducts[4].id)">{{ displayProducts[4].name }}</a></h2>
            <span>限时特卖</span>
          </div>
        </div>
        <div class="sell_b2" v-if="displayProducts.length > 5">
          <div class="sb_img">
            <a href="#" @click.prevent="viewProduct(displayProducts[5].id)">
              <img :src="getProductImage(displayProducts[5])" width="242" height="356" :alt="displayProducts[5].name" @error="handleImageError" />
            </a>
          </div>
          <div class="s_price">￥<span>{{ displayProducts[5].price }}</span></div>
          <div class="s_name">
            <h2><a href="#" @click.prevent="viewProduct(displayProducts[5].id)">{{ displayProducts[5].name }}</a></h2>
            <span>限时特卖</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { queryProduct } from '@/api/productApi'

export default {
  name: 'FlashSale',
  props: {
    banners: {
      type: Array,
      default: () => []
    },
    products: {
      type: Array,
      default: () => []
    }
  },
  setup(props, { emit }) {
    const carouselRef = ref(null)
    const randomProducts = ref([])
    
    // 显示的商品数据，最多显示6个
    const displayProducts = computed(() => {
      const products = props.products.length > 0 ? props.products : randomProducts.value
      return products.slice(0, 6)
    })
    
    // 加载随机商品数据
    const loadRandomProducts = async () => {
      try {
        // 获取10个随机商品
        const res = await queryProduct({ pageSize: 10 })
        let products = []
        
        if (res && res.data) {
          products = Array.isArray(res.data) ? res.data : []
        } else if (Array.isArray(res)) {
          products = res
        }
        
        // 随机选择6个商品
        if (products.length <= 6) {
          randomProducts.value = products
        } else {
          // 随机选择6个商品
          const shuffled = [...products].sort(() => 0.5 - Math.random())
          randomProducts.value = shuffled.slice(0, 6)
        }
      } catch (error) {
        console.error('获取随机商品失败:', error)
        // 如果获取失败，使用空数组
        randomProducts.value = []
      }
    }
    
    const viewMore = () => {
      emit('view-more')
    }
    
    const viewBanner = (id) => {
      emit('view-banner', id)
    }
    
    const viewProduct = (id) => {
      emit('view-product', id)
    }
    
    // 获取商品图片
    const getProductImage = (product) => {
      if (product.fileName) {
        try {
          // 尝试返回实际图片路径
          return require(`@/assets/files/${product.fileName}`)
        } catch (error) {
          // 如果图片不存在，返回默认图片
          console.warn(`商品图片加载失败: ${product.fileName}`, error)
          return require('@/assets/images/default_product.jpg')
        }
      }
      // 如果没有fileName，返回默认图片
      return require('@/assets/images/default_product.jpg')
    }
    
    // 处理图片加载错误
    const handleImageError = (event) => {
      event.target.src = require('@/assets/images/default_product.jpg')
    }
    
    // 滚动横幅
    const scrollBanners = (direction) => {
      if (carouselRef.value) {
        if (direction === 'next') {
          carouselRef.value.next()
        } else if (direction === 'prev') {
          carouselRef.value.prev()
        }
      }
    }
    
    onMounted(async () => {
      // 如果没有传入products，则获取随机商品
      if (props.products.length === 0) {
        await loadRandomProducts()
      }
    })
    
    return {
      carouselRef,
      displayProducts,
      viewMore,
      viewBanner,
      viewProduct,
      getProductImage,
      handleImageError,
      scrollBanners,
      loadRandomProducts
    }
  }
}
</script>

<style scoped>
/* 使用项目现有样式 */
</style>